<template>
  <div class="app-container">
    <div style="padding-top:5px">
      <el-table ref="ruleTable" :data="data" stripe size="small" border style="width: 100%;" :height="tableHeight">
        <el-table-column :show-overflow-tooltip="true" label="表单名称" prop="sheetName" />
        <el-table-column :show-overflow-tooltip="true" label="Excel列号" prop="columnIndex" />
        <el-table-column :show-overflow-tooltip="true" label="字段名" prop="columnName" />
        <el-table-column label="规则类型1" prop="rule1List">
          <template slot-scope="scope">
            <el-button v-for="(rule1,index) in scope.row.rule1List" :key="index" type="text" @click="toRule1Page(rule1.id)">[rule1]-{{ rule1.id }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="规则类型2" prop="rule2List">
          <template slot-scope="scope">
            <el-button v-for="(rule2,index) in scope.row.rule2List" :key="index" type="text" @click="toRule2Page(rule2.id)">[rule2]-{{ rule2.id }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="规则类型3" prop="rule3List">
          <template slot-scope="scope">
            <el-button v-for="(rule3,index) in scope.row.rule3List" :key="index" type="text" @click="toRule3Page(rule3.id)">[rule3]-{{ rule3.id }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { initRuleList } from '@/api/rule'

export default {
  data() {
    return {
      data: [],
      tableHeight: window.innerHeight * 0.89
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          this.doLayout()
        })
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.doLayout, true)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.doLayout, true)
  },
  created() {
    this.$nextTick(() => {
      this.beforeInit()
    })
  },
  methods: {
    doLayout() {
      if (this.$refs.ruleTable) {
        this.$refs.ruleTable.doLayout()
      }
    },
    beforeInit() {
      initRuleList().then(res => {
        this.data = res
      })
    },
    toRule1Page(id) {
      console.log('rule1===' + id)
    },
    toRule2Page(id) {
      console.log('rule2===' + id)
    },
    toRule3Page(id) {
      console.log('rule3===' + id)
    }
  }
}
</script>
